<template>
    <div>
<table>
    <tr>
        <td>名称</td>
        <td>    <input type="text"  v-model="state.rname"/></td>
    </tr>
    <tr>
        <td>电话</td>
        <td>    <input type="text" v-model="state.rphone"/></td>
    </tr>
    <tr>
        <td>单价</td>
        <td>    <input type="text" v-model="state.rprice"/></td>
    </tr>
    <tr>
        <td>积分</td>
        <td>    <input type="text" v-model="state.rjifen"/></td>
    </tr>
    <tr>
        <td>图片</td>
        <td>
            <input type="file" @change="tianjia" />
            <img :src="state.rimage" alt="" width="50px"  height="100px" v-if="src!=''" />
        </td>
    </tr>
    <tr>
        <td>性别</td>
        <td>
            <input type="text" v-model="state.rsex" />
        </td>
    </tr>
    <tr>
        <td>时间</td>
        <td>
            <input type="date" v-model="state.rdate"/>
        </td>
    </tr>
    <tr>
        <td>
            <input type="button" value="添加" @click="add" />
        </td>
        <td></td>
    </tr>
  
</table>
    </div>
</template>

<script setup lang="ts">
import { reactive,onMounted,toRefs } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import axios from 'axios'
const route = useRoute()
const router = useRouter()
const data = reactive({
    state:{
        rname:'',
        rphone:'',
        rprice:'',
        rjifen:'',
        rimage:'',
        rsex:'',
        rdate:'',
        rxiustate:1,
       
    },
    src:''
})
const {state,src} = toRefs(data)

const tianjia = (e:any)=>{
    let file = e.target.files[0]
    let from = new FormData()
    from.append('file',file)
    axios({
        url:'https://localhost:7022/api/image/shangchuan',
        method:'post',
        data:from
    }).then((res)=>{
        console.log(res)
        src.value = res.data.data
        state.value.rimage=res.data.data
    })
}

const add=()=>{
    axios({
        url:'https://localhost:7022/api/Propers/addProprts',
        method:'post',
        data:state.value
    }).then((res)=>{
        console.log(res)
        if(res.data.data>0)
        {
            alert('添加成功')
        }
        else
        {
            alert('添加失败')
        }
    })
}



</script>

<style scoped>

</style>